<template>
  <el-breadcrumb class="crumbs" separator="/">
    <el-breadcrumb-item v-for="item in breadcrumbList" :key="item.name" :to="{ path: item.path, query: item.query }">
      {{ item.name }}
    </el-breadcrumb-item>
  </el-breadcrumb>

  <div class="container">
    <el-table height="550px" border size="small" :data="tableData" @selection-change="handleSelectionChange">
      <el-table-column prop="id" label="ID" width="50"></el-table-column>
<!--      <el-table-column prop="username" label="用户" width="80"></el-table-column>-->
      <el-table-column prop="start" label="工作开始时间"></el-table-column>
      <el-table-column prop="content" label="工作内容"></el-table-column>
      <el-table-column prop="end" label="工作结束时间"></el-table-column>
    </el-table>
  </div>

</template>

<script lang="ts">
import { defineComponent, getCurrentInstance, watch, ref, computed } from "vue";
import { useStore } from "vuex";
import { HttpManager } from "@/api";

export default defineComponent({

  setup() {
    const { proxy } = getCurrentInstance();
    const store = useStore();

    const tableData = ref([]);
    const tempDate = ref([]);
    const breadcrumbList = computed(() => store.getters.breadcrumbList);

    const searchWord = ref("");
    // watch(searchWord, () => {
    //   if (searchWord.value === "") {
    //     tableData.value = tempDate.value;
    //   } else {
    //     tableData.value = [];
    //     for (let item of tempDate.value) {
    //       if (item.username.includes(searchWord.value)) {
    //         tableData.value.push(item);
    //       }
    //     }
    //   }
    // });

    getData();


    function getData() {
      tableData.value = [];
      tempDate.value = [];
      let promise = null;
      // promise = HttpManager.contentOfUserId(proxy.$route.query.id) ;
      promise = (HttpManager.contentOfUserId(proxy.$route.query.id)) as any;
      promise.then((res) => {
        console.log(res)
        for (let item of (res as ResponseBody).data) {
          getUsers(item.userId, item);
        }
      }).catch(err => {
        console.log(err)
      })
    }
    async function getUsers(id, item) {
      const result = (await HttpManager.getUserOfId(id)) as ResponseBody;
      //item.username = result.data[0].username;
      tableData.value.push(item);
      tempDate.value.push(item);
    }
    // 记录当前要删除的行
    const idx = ref(-1);
    // 记录当前要删除的列表
    const multipleSelection = ref([]);
    // 显示删除框
    const delVisible = ref(false);

    function handleSelectionChange(val) {
      multipleSelection.value = val;
    }

    return {
      searchWord,
      tableData,
      delVisible,
      breadcrumbList,
      handleSelectionChange,
      confirm,
    };
  },
});
</script>

